<template>
    <div class="side-wrapper">
        <logo :collapse="collapsed" />
        <scroll-bar class="side-main">
            <a-menu
                :mode="mode"
                :inline-collapsed="!collapsed"
                theme="dark"
                :selectedKeys="[$route.path]"
                :open-keys="openKeys"
                @openChange="changeOpen"
            >
                <template v-for="item in baseRoute">
                    <template v-if="!item.children && !item.hidden && item.path">
                        <menu-item :key="item.path" :currentRoute="item" />
                    </template>
                    <template v-else v-for="temp in item.children">
                        <template v-if="temp.path">
                            <template v-if="!temp.children && temp.path">
                                <menu-item :key="temp.path" :currentRoute="temp" />
                            </template>
                            <sub-menu  v-if="temp.children && temp.children.length" :key="temp.path" :currentRoute="temp"></sub-menu>
                        </template>
                    </template>
                </template>
            </a-menu>
        </scroll-bar>
    </div>
</template>

<script>
import logo from './logo';
import subMenu from './subMenu';
import menuItem from './menuItem';
import { mapGetters } from 'vuex';
export default {
    name: 'sideBar',
    props: {
        collapsed: {
            type: Boolean,
            default: true
        },
        mode: {
            type: String,
            default: 'inline'
        }
    },
    components: { logo, subMenu, menuItem },
    data() {
        return {
            openKeys: []
        };
    },
    computed: {
        ...mapGetters(['baseRoute'])
    },
    mounted() {
        let matched = this.$route.matched.filter(item => item.meta && item.meta.title);
        if (matched.length > 1) {
            this.openKeys = matched.map(item => item.path);
        }
    },
    methods: {
        changeOpen(keys) {
            const currentOpenKey = keys.find(key => this.openKeys.indexOf(key) === -1);
            const children = this.baseRoute.filter(item => item.children);

            if (children[0].children.findIndex(item => item.path == currentOpenKey) === -1) {
                this.openKeys = keys;
            } else {
                this.openKeys = currentOpenKey ? [currentOpenKey] : [];
            }
        }
    }
};
</script>
